SVG optimizations SVG最適化

ツール

? 圧縮して壊れる場合ある？

ある

最適化処理のデフォルトがviewBox SVGを削除する場合

viewBox SVGがなくなるとIEで見た目壊れる

HTMLが肥大化、maintainability 保守性が下がるけど、良い管理方法ないのか？

全部、symbol利用すると管理自身は楽だけど初期ロードが重い

困りごと

インライン要素 Inline Elementsにした際、いくつかのブラウザで見た目が変わる

原因:mask svgやdef svgの挙動がブラウザによって変わる

解決策

path svgだけぐらいに...

Data URI使う場合

base64よりパフォーマンス良い

data:image/svg+xml;charset=utf8,<svg ...> ... </svg>の形に

"'data:image/svg+xml;charset=utf8,' + encodeURIComponent(close_svg)"

encodeURIComponent(js_value)でsvg部分をjsで定義可能

charset=utf8忘れずに

IE11の表示で必要

参考

pathの削減

無駄に繰り返されているものをpattern svgで減らす事ができる。

ただし、Sketch プロトタイピングやFigmaで対応されていないので、直接編集必要